<template>
	<view>
		<view class="playing_progress">
			<view class="time u-f-ajc">
				<text >{{palytimed}}</text>
			</view>
			<view class="content">
 				<movable-area class="movable-area">
				  <movable-view direction="horizontal" class="movable-view"
					damping="1000" :x="movableDis" 
					 @change="onChange"
					 @touchend="onTouchEnd"
				  >
					<image src="../../../static/icon/yuan.png" mode="widthFix"></image>
				  </movable-view>
				</movable-area> 
				<progress stroke-width="3" border-radius="1" color="#dadada" 
				:percent="progress" active-color="#d33a31"  active
				active-mode="forwards" duration="1" >
				</progress>
			</view>
			<view class="time u-f-ajc">
				<text >{{audAllTime}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	let audioCtx=uni.getBackgroundAudioManager();
	let movableAreaWidth = 0
	let movableViewWidth = 0
	//总时间
	let duration=0;
	let currentTime=0;
	//当前秒数
	let currentSec=-1;
	let isMoving = false // 表示当前进度条是否在拖拽，解决：当进度条拖动时候和updatetime事件有冲突的问题
	import { mapState } from 'vuex';
	export default {
		props:{
		},
		data() {
			return {
				audAllTime:'00:00',
				palytimed:'00:00',
				progress:0,
				movableDis:0
			}
		},
		computed: {
			...mapState(['Id']),
		},
		created() {
			this.getBgmTime();
			if(this.Id){
				this.getallTiem();
			}
			this.getMovableDis();
		},
		methods: {
			//注册时间相关事件
			getBgmTime(){
				//进度更新事件
				audioCtx.onTimeUpdate(()=>{
					if (!isMoving) {
						//播放时间进度
						currentTime=audioCtx.currentTime;
						let sec=currentTime.toString().split('.')[0];
						if(sec!=currentSec){
							let played=this.dateFormat(currentTime);
							this.palytimed=played.min+":"+played.sec;
							//进度条
							this.progress=(currentTime/duration)*100;
							//设置进度拖拽
							this.movableDis=(movableAreaWidth - movableViewWidth) * currentTime / duration;
							currentSec = sec;
							this.$emit('timeUpdate',{currentTime} );
						}
					}
				})
			},
			//获取拖拽宽度
			getMovableDis() {
			  const query = uni.createSelectorQuery().in(this);
			  query.select('.movable-area').boundingClientRect()
			  query.select('.movable-view').boundingClientRect()
			  query.exec((rect) => {
				//console.log(rect)
				movableAreaWidth = rect[0].width
				movableViewWidth = rect[1].width
				// console.log(movableAreaWidth, movableViewWidth)
			  })
			},
			onChange(event) {
			  // console.log(event)
			  // 拖动
			  if (event.detail.source == 'touch') {
				this.progress = event.detail.x / (movableAreaWidth - movableViewWidth) * 100
				this.movableDis = event.detail.x
				isMoving = true
				// console.log('change', isMoving)
			  }
			},
			onTouchEnd() {
			  const currentTimeFmt = this.dateFormat(Math.floor(audioCtx.currentTime))
				this.progress=this.progress,
				this.movableDis= this.movableDis,
				this.palytimed= currentTimeFmt.min + ':' + currentTimeFmt.sec
			  audioCtx.seek(duration * this.progress / 100)
			  isMoving = false
			  // console.log('end', isMoving)
			},	
			//总时间
			getallTiem(){
				duration=audioCtx.duration;
				let alltime=this.dateFormat(duration);
				this.audAllTime=alltime.min+":"+alltime.sec;
			},
			// 格式化时间
			dateFormat(sec) {
			  // 分钟
			  const min = Math.floor(sec / 60)
			  sec = Math.floor(sec % 60)
			  return {
				'min': this.parse0(min),
				'sec': this.parse0(sec),
			  }
			},
			// 补零
			parse0(sec) {
			  return sec < 10 ? '0' + sec : sec
			}
		}
	}
</script>

<style lang="less" scoped>
	.playing_progress{
		position: absolute;
		z-index: 5;
		left: 0;
		right: 0;
		bottom: 12%;
		padding: 0 20rpx 0 20rpx;
		display: flex;
		align-items: center;
		.time{
			flex: 2;
			text{
				font-size: 24rpx;
				color: cornsilk;
			}
		}
		.content{
			flex: 10;
			position: relative;
			.movable-area {
			  width: 100%;
			  height: 34rpx;
			  position: absolute;
			  bottom: -14rpx;
			  left: 0;
			}
			.movable-view {
			  width: 36rpx;
			  height: 36rpx;
			  image{
				   width: 100%;
				   border-radius: 50%;
			  }
			}
		}
	}
</style>
